웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트에서 버튼을 클릭할 경우 원하는 텍스트를 복사하는 방법은 비교적 간단합니다. 하지만 만약 DOM 엘리먼트 자체를 복사하려면 어떻게 하면 될까요? 아래에서 자세히 알아봅니다.
@ 그런데 엘리먼트까지 복사할 필요가 있을까?
사실 엘리먼트 자체를 복사할 필요는 대부분 없습니다. 다만 일부 필요한 경우가 있을 수도 있는데 특히 위지윅 에디터를 사용하는 경우 에디터 내부에 복사하여 사용할 수 있겠죠. 이 경우가 하나의 예가 될 수 있습니다.
엘리먼트를 복사하기 위해서 아래와 같은 과정들로 이루어지게 됩니다.
1. 버튼 클릭시 임의의 새로운 div 요소를 생성하기
2. 위의 div 요소에 innerHTML로 복사할 태그 요소를 생성하기(여기서는 a 태그)
3. 1번의 div 요소를 body에 붙여넣기
4. document.createRange()를 사용하여 새로운 range를 생성하기
5. 4의 range에 기존의 div를 설정하기
6. window.getSelection()을 사용하여 4의 range를 선택되도록 하기
7. document.execCommand('copy')를 사용하여 클립보드에 복사하기
8. 임시로 만든 div 요소 제거하기
여기까지입니다. 꽤 순서가 많은데요 ~ 중요한 부분만 짚어보면 다음과 같습니다.
Q) div 요소를 만드는 이유는?
A) body에 append(붙이기)하기 위해서 입니다. 또 body에 붙여야만 document.execCommand()를 사용하여 클립보드에 붙여넣을 수 있습니다.
Q) range와 getSelection()을 사용하는 이유는?
A) range를 사용하면 getSelection()에 range를 추가할 수 있고 즉 마치 엘리먼트를 실제로 드래그해 선택한 것과 동일하게 이벤트를 구현할 수 있습니다.
그럼 아래에서 예제를 사용하여 실제로 만들어봅니다.
하나하나 순서대로 만들어봅니다. 위와 같은 기능 구현을 위해서 가장 먼저 페이지에 버튼을 하나 추가합니다.
이 버튼을 클릭하면 copyElement()라는 함수를 호출하게 됩니다. 이 함수가 바로 엘리먼트를 복사하여 붙여넣을 수 있도록 구현한 함수입니다.
여기서 어떤 엘리먼트를 복사할 것인가를 생각해야 하는데 여기서는 document.createElement()를 사용하여 새로운 a 태그를 생성하였습니다. 이제 실제로 완성된 copyLink() 함수를 다음과 같습니다.
@ copylink.js
여기까지 모든 과정이 완료되었습니다.
여기까지 Element를 버튼 클릭이로 복사하여 붙여넣는 방법을 알아보았습니다.
@ 그런데 엘리먼트까지 복사할 필요가 있을까?
사실 엘리먼트 자체를 복사할 필요는 대부분 없습니다. 다만 일부 필요한 경우가 있을 수도 있는데 특히 위지윅 에디터를 사용하는 경우 에디터 내부에 복사하여 사용할 수 있겠죠. 이 경우가 하나의 예가 될 수 있습니다.
# 자바스크립트 버튼 클릭시 엘리먼트 요소 복사하기
엘리먼트를 복사하기 위해서 아래와 같은 과정들로 이루어지게 됩니다.
1. 버튼 클릭시 임의의 새로운 div 요소를 생성하기
2. 위의 div 요소에 innerHTML로 복사할 태그 요소를 생성하기(여기서는 a 태그)
3. 1번의 div 요소를 body에 붙여넣기
4. document.createRange()를 사용하여 새로운 range를 생성하기
5. 4의 range에 기존의 div를 설정하기
6. window.getSelection()을 사용하여 4의 range를 선택되도록 하기
7. document.execCommand('copy')를 사용하여 클립보드에 복사하기
8. 임시로 만든 div 요소 제거하기
여기까지입니다. 꽤 순서가 많은데요 ~ 중요한 부분만 짚어보면 다음과 같습니다.
Q) div 요소를 만드는 이유는?
A) body에 append(붙이기)하기 위해서 입니다. 또 body에 붙여야만 document.execCommand()를 사용하여 클립보드에 붙여넣을 수 있습니다.
Q) range와 getSelection()을 사용하는 이유는?
A) range를 사용하면 getSelection()에 range를 추가할 수 있고 즉 마치 엘리먼트를 실제로 드래그해 선택한 것과 동일하게 이벤트를 구현할 수 있습니다.
그럼 아래에서 예제를 사용하여 실제로 만들어봅니다.
! 동일하게 버튼 만들어 예제를 구현하기
하나하나 순서대로 만들어봅니다. 위와 같은 기능 구현을 위해서 가장 먼저 페이지에 버튼을 하나 추가합니다.
<button type="button" onclick="copyElement();">제목과 링크 복사하기</button>
이 버튼을 클릭하면 copyElement()라는 함수를 호출하게 됩니다. 이 함수가 바로 엘리먼트를 복사하여 붙여넣을 수 있도록 구현한 함수입니다.
여기서 어떤 엘리먼트를 복사할 것인가를 생각해야 하는데 여기서는 document.createElement()를 사용하여 새로운 a 태그를 생성하였습니다. 이제 실제로 완성된 copyLink() 함수를 다음과 같습니다.
@ copylink.js
function copyLink() {
// 복사할 임의의 a 태그 만들기
const link = 'https://webisfree.com';
const title = '웹이즈프리';
const copyEle = document.createElement('div');
copyEle.innerHTML = `<a href="${link}">${title}</a>`;
// 생성한 a 태그를 body에 추가하기
document.body.appendChild(copyEle);
// range에 a 태그를 추가하고 이를 getSelection()에 연결하기
const range = document.createRange();
range.selectNode(copyEle);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
// 마지막으로 클립보드에서 copy 이벤트 수행 후 완료하기
document.execCommand('copy');
document.body.removeChild(copyEle);
console.log('복사완료!!');
};
// 복사할 임의의 a 태그 만들기
const link = 'https://webisfree.com';
const title = '웹이즈프리';
const copyEle = document.createElement('div');
copyEle.innerHTML = `<a href="${link}">${title}</a>`;
// 생성한 a 태그를 body에 추가하기
document.body.appendChild(copyEle);
// range에 a 태그를 추가하고 이를 getSelection()에 연결하기
const range = document.createRange();
range.selectNode(copyEle);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
// 마지막으로 클립보드에서 copy 이벤트 수행 후 완료하기
document.execCommand('copy');
document.body.removeChild(copyEle);
console.log('복사완료!!');
};
여기까지 모든 과정이 완료되었습니다.
여기까지 Element를 버튼 클릭이로 복사하여 붙여넣는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
